<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :inline="true"
    />
    <div class="contentBattery">
      <div style="width: 150px;">User Status：</div>
      <div class="contentBatterydiv">
        Leased Out:<span class="contentBatteryspan">{{
          userState[-2] || 0
        }}</span
        >Man
      </div>
      <div class="contentBatterydiv" style="width:270px;">
        Register User：<span class="contentBatteryspan">{{
          userState[-1] || 0
        }}</span
        >Man
      </div>
      <div class="contentBatterydiv" style="width:270px;">
        Online User：<span class="contentBatteryspan">{{
          userState[0] || 0
        }}</span
        >Man
      </div>
      <div class="contentBatterydiv">
        Rented：<span class="contentBatteryspan">{{ userState[1] || 0 }}</span
        >Man
      </div>
      <div class="contentBatterydiv">
        Overdue：<span class="contentBatteryspan">{{ userState[2] || 0 }}</span
        >Man
      </div>
    </div>
    <r-table
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      :isSelection="false"
      @refresh="page()"
    />
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="700px"
      :isHandle="true"
    />
    <button></button>
    <userDetails
      :res="userDetailsData"
      v-if="userDetailsData.show"
      v-on:userDetailsCall="userDetailsCall"
    >
    </userDetails>
    <!-- ImportBattery Swap Records按钮的Template -->
    <Abnormal_record ref="Abnormal_record"></Abnormal_record>
    <userSetmeal ref="userSetmeal"></userSetmeal>
  </div>
</template>

<script>
import userDetails from "./cus/userDetails";
import Abnormal_record from "./cus/Abnormal_record";
import userSetmeal from "./cus/userSetmeal";
export default {
  components: {
    userDetails,
    Abnormal_record,
    userSetmeal
  },
  data() {
    return {
      userState: {},
      formData: {
        userId: "",
        day: "",
        couponId: ""
      },
      formCols: [
        {
          type: "input",
          label: "Userid",
          placeholder: "Please Input Userid",
          width: 350,
          prop: "userId",
          isDisabled: () => true
        },
        {
          type: "select",
          label: "Coupon",
          width: 350,
          prop: "couponId",
          options: []
        },
        {
          type: "input",
          label: "Coupon Period Of Validity",
          placeholder: "Please Input Coupon Period Of Validity",
          width: 350,
          prop: "day"
          // remark: "天"
        }
      ],
      formRules: {
        userId: [{ required: true, message: "Please Input", trigger: "blur" }],
        day: [{ required: true, message: "Please Input", trigger: "blur" }],
        couponId: [
          { required: true, message: "Please Select", trigger: "blur" }
        ]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ],

      userDetailsData: {
        show: false
      },
      cardLab: "Let Be The Monthly Card",
      searchData: {
        nickName: "",
        phone: "",
        rentFlag: ""
      },
      searchForm: [
        {
          type: "input",
          placeholder: "User Name",
          prop: "nickName",
          width: 230
        },
        { type: "input", placeholder: "Phone", prop: "phone", width: 200 },
        // { type: "date", placeholder: "Registration Time", prop: "date", width: 200 },
        {
          type: "select",
          placeholder: "User Status",
          prop: "rentFlag",
          width: 230,
          options: [
            { label: "Leased Out", value: -2 },
            { label: "Register User", value: -1 },
            { label: "Online User", value: 0 },
            { label: "Rented", value: 1 },
            { label: "Overdue", value: 2 }
          ]
        }
      ],
      searchHandle: [
        {
          type: "primary",
          label: "Search",
          plain: true,
          handle: e => {
            this.zeroFn();
            this.getData();
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              nickName: "",
              phone: "",
              rentFlag: ""
            };
            this.zeroFn();
            this.getData();
          }
        }
      ],
      tableLoading: false,
      tableData: [],
      tableCols: [
        // { label: "序号", prop: "userId", },
        { label: "User Name", prop: "nickName" },
        // { label: "User授权Phone", prop: "phone", },
        {
          type: "link",
          label: "Phone",
          prop: "phone",
          width: "120",
          click: e => {
            this.$router.push({
              name: "user_management-userOdrer",
              params: { phone: e.phone || "" }
            });
          }
        },
        { label: "Current Employ Battery Number", prop: "btNo" },
        { label: "Valid Order Quantity", prop: "orderNum" },
        { label: "Total Consumption Money", prop: "consumeMoney" },
        // { label: "实际消费Money", prop: "isVip_des",  },
        { label: "Recharge Amount", prop: "totalBalance" },
        { label: "Residue Money", prop: "balance" },
        { label: "Gift Amount Money Balance", prop: "giveMoney" },
        { label: "Frozen Deposit", prop: "deposit" },
        { label: "Registration Time", prop: "ctime" },
        { label: "Last Battery Swap Time", prop: "rentTime" },
        {
          label: "User Status",
          prop: "rentFlag",
          itemClass: e => (e.rentFlag == -2 ? "danger" : ""),
          formatter: e =>
            e.rentFlag == -2
              ? "Leased Out"
              : e.rentFlag == -1
              ? "Register User"
              : e.rentFlag == 0
              ? "Online User"
              : e.rentFlag == 1
              ? "Rented"
              : e.rentFlag == 2
              ? "Overdue"
              : "-"
        },
        // { label: "月卡Status", prop: "guest", theme: e => e.guest == 0 ? 'primary' : 'danger', type: "tag", formatter: e => e.guest == 0 ? '否' : '是' },
        {
          label: "Operations",
          type: "button",
          width: 330,
          btnList: [
            {
              label: "Battery Swap Records",
              type: "primary",
              plain: true,
              size: "mini",
              style: { "margin-bottom": "5px" },
              handle: row => {
                this.$refs.Abnormal_record.show_fun(row);
              }
            },
            {
              label: "View Details",
              type: "success",
              plain: true,
              size: "mini",

              handle: row => {
                // this.userDetailsData.id = row.userId;
                // this.userDetailsData.show = true;
                this.$message({
                  type: "error",
                  message: "Please Add Device"
                });
              }
            },
            {
              label: "Distribute Discount Coupons",
              type: "primary",
              size: "mini",
              plain: true,
              handle: row => {
                this.elFormDetail(row);
              }
            },
            {
              label: "Package",
              type: "success",
              size: "mini",
              plain: true,
              handle: row => {
                this.$refs.userSetmeal.show_funs(row);
              }
            }
          ]
        }

        // {
        //   label: "月卡",
        //   type: "button",
        //   width: 100,
        //   size: "mini",
        //   btnList: [
        //     {
        //       label: '设为',
        //       type: "text",
        //       size: "mini",
        //       handle: (row) => {
        //         this.setCard(row.userId)
        //       }
        //     },
        //     {
        //       label: 'Cancel',
        //       type: "text",
        //       size: "mini",
        //       handle: (row) => {
        //         this.cancelCard(row.userId)
        //       }
        //     },
        //   ]
        // },
      ],
      tableHandles: [],
      pagination: { limit: 10, offset: 1, total: 0 },

      checkBox: []
    };
  },
  created() {},
  mounted() {
    this.getData();
    this.batteryTypeList();
    this.userStateFn();
  },
  methods: {
    async userStateFn() {
      let res = await this.apis.userStatistics();
      if (res.code == 200 && res.data) {
        this.userState = res.data;
      }
    },
    zeroFn() {
      this.pagination.limit = 10;
      this.pagination.offset = 1;
      this.pagination.total = 0;
    },
    async elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let res = await this.apis.couponPutCoupon(this.formData);
          this.$message({
            type: res.code == 200 ? "success" : "error",
            message: res.msg
          });
          this.elFormVisible();
          this.getData();
        }
      });
    },
    async batteryTypeList() {
      let res = await this.apis.couponList({
        pageNum: 1,
        pageSize: 100,
        isOpen: 1
      });
      let list = res.rows || [];
      let options = [];
      list.map(res => {
        options.push({
          label: res.name,
          value: res.id
        });
      });
      this.formCols[
        this.labIndex2(this.formCols, "couponId")
      ].options = options;
    },
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      this.elFormVisible();
    },
    userDetailsCall() {
      this.userDetailsData.show = false;
    },

    async setCard(id) {
      var res = await this.apis.setMonthCard({
        userId: id
      });
      this.getData();
    },

    async cancelCard(id) {
      var res = await this.apis.cancelMonthCard({
        userId: id
      });
      this.getData();
    },

    async usersys_updata(row) {
      var res = await this.apis.usersys_updata({
        id: row.id,
        state: row.state == 34 ? 35 : 34
      });
      this.getData();
    },
    async getData() {
      var res = await this.apis.user_list2({
        phone: this.searchData.phone,
        nickName: this.searchData.nickName,
        rentFlag: this.searchData.rentFlag,
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit
      });

      var list = res.rows || [];

      list.map(res => {
        // console.log(res)
        res.btn_des = res.state == 34 ? "Enable" : "Forbidden";
        res.isVip_des = res.isVip == 0 ? "No" : res.isVip == 1 ? "Yes" : "";
      });

      this.tableData = list;
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss">
.contentBattery {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 15px;
  width: 970px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  left: 0px;
  top: 0;
}

.contentBatterydiv {
  width: 200px;
  text-align: center;
  background: #7abdf0;
  padding: 10px 0;
  margin-right: 20px;
  border: 1px solid rgb(37, 183, 228);
  border-radius: 5%;
  box-shadow: 1px 3px 5px 2px rgba(0, 0, 0, 0.4);
}

.contentBatteryspan {
  margin-right: 5px;
  color: #000cff;
}
</style>
